<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 课程管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #666;
            font-size: 14px;
        }

        .main-table {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .search-input {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 25px;
            outline: none;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .search-input:focus {
            border-color: #667eea;
        }

        .filter-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: #667eea;
            color: white;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }

        .filter-btn:hover {
            background: #5a67d8;
            transform: scale(1.05);
        }

        .course-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .course-table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 18px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
        }

        .course-table td {
            padding: 15px 12px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }

        .course-table tr:hover {
            background: #f8f9ff;
        }

        /* 课程信息卡片样式 */
        .course-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            min-width: 120px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .course-char {
            font-size: 3rem;
            font-weight: bold;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            margin-bottom: 5px;
        }

        .course-pinyin {
            font-size: 16px;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 15px;
            margin-bottom: 3px;
        }

        .course-strokes {
            font-size: 12px;
            opacity: 0.9;
        }

        .course-number {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255,255,255,0.3);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
        }

        /* 模块格子样式 */
        .module-cell {
            width: 85px;
            height: 65px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .module-cell:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .status-completed {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
        }

        .status-in-progress {
            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
            color: white;
        }

        .status-pending {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
            color: #4a5568;
        }

        .status-generating {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .module-icon {
            font-size: 18px;
            margin-bottom: 3px;
        }

        .module-name {
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .module-info {
            font-size: 9px;
            opacity: 0.8;
        }

        /* 编辑器弹窗样式 */
        .editor-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .editor-modal {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 1000px;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 25px 100px rgba(0,0,0,0.3);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.9) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .editor-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .editor-title {
            font-size: 20px;
            font-weight: 600;
        }

        .close-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            transition: background 0.3s;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .editor-content {
            padding: 30px;
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 25px;
            height: 600px;
        }

        .editor-main {
            display: flex;
            flex-direction: column;
        }

        .toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .toolbar-section {
            display: flex;
            gap: 5px;
            padding: 5px;
            border-right: 1px solid #e2e8f0;
            margin-right: 8px;
        }

        .toolbar-section:last-child {
            border-right: none;
            margin-right: 0;
        }

        .toolbar-btn {
            padding: 6px 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s;
            white-space: nowrap;
            min-width: auto;
        }

        .btn-primary { background: #667eea; color: white; }
        .btn-success { background: #48bb78; color: white; }
        .btn-danger { background: #f56565; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        .btn-warning { background: #ed8936; color: white; }
        .btn-info { background: #4299e1; color: white; }

        .toolbar-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .format-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .color-picker {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            overflow: hidden;
        }

        .content-textarea {
            flex: 1;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
            outline: none;
            transition: border-color 0.3s;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .content-textarea:focus {
            border-color: #667eea;
        }

        .ai-panel {
            background: #f7fafc;
            border-radius: 15px;
            padding: 20px;
            overflow-y: auto;
        }

        .ai-section {
            margin-bottom: 20px;
        }

        .ai-section h4 {
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 13px;
            font-weight: 600;
        }

        .ai-option {
            padding: 8px 12px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            margin-bottom: 6px;
            transition: all 0.3s;
        }

        .ai-option:hover {
            background: #edf2f7;
            border-color: #667eea;
            transform: translateX(2px);
        }

        .model-select, .module-select {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            margin-bottom: 10px;
            background: white;
        }

        .prompt-textarea {
            width: 100%;
            height: 60px;
            padding: 8px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            resize: vertical;
            margin-bottom: 10px;
            font-family: inherit;
        }

        .generate-btn {
            width: 100%;
            padding: 10px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }

        .generate-btn:hover {
            background: #5a67d8;
        }

        .tts-controls {
            background: #fff7ed;
            border: 1px solid #fed7aa;
            border-radius: 8px;
            padding: 12px;
            margin-top: 10px;
        }

        .tts-controls h5 {
            color: #9a3412;
            margin-bottom: 8px;
            font-size: 12px;
        }

        .voice-select {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #fed7aa;
            border-radius: 4px;
            font-size: 11px;
            margin-bottom: 8px;
            background: white;
        }

        .tts-controls-row {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }

        .speed-slider {
            flex: 1;
            margin: 0 8px;
        }

        .tts-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .play-btn { background: #22c55e; color: white; }
        .pause-btn { background: #f59e0b; color: white; }
        .stop-btn { background: #ef4444; color: white; }

        .status-bar {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            margin-top: 15px;
            font-size: 13px;
        }

        .status-generating {
            background: #e6fffa;
            border-color: #38b2ac;
            color: #285e61;
        }

        .format-preview {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            font-style: italic;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
        }

        .page-btn {
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .page-btn:hover, .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
    </style>
</head>
<body>
    <div id="app" class="app-container">
        <!-- 头部 -->
        <div class="header">
            <h1>📚 岚小字识字系统</h1>
            <p>AI赋能的字根识字教学管理平台</p>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">{{ statistics.total }}</div>
                <div class="stat-label">总课程数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ statistics.completed }}</div>
                <div class="stat-label">已完成</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ statistics.inProgress }}</div>
                <div class="stat-label">进行中</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ statistics.pending }}</div>
                <div class="stat-label">未开始</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ statistics.avgProgress }}%</div>
                <div class="stat-label">平均完成度</div>
            </div>
        </div>

        <!-- 主表格 -->
        <div class="main-table">
            <div class="table-header">
                <h2>📋 课程管理</h2>
                <div class="search-bar">
                    <input 
                        type="text" 
                        placeholder="搜索课程..." 
                        class="search-input"
                        v-model="searchKeyword"
                        @input="filterCourses">
                    <button class="filter-btn" @click="showFilter = !showFilter">
                        筛选 {{ showFilter ? '▼' : '▶' }}
                    </button>
                </div>
            </div>

            <table class="course-table">
                <thead>
                    <tr>
                        <th style="width: 80px;">编号</th>
                        <th style="width: 150px;">课程信息</th>
                        <th style="width: 100px;">👋欢迎词</th>
                        <th style="width: 100px;">🟢字根学习</th>
                        <th style="width: 100px;">🔵偏旁笔画</th>
                        <th style="width: 100px;">🟡书写讲解</th>
                        <th style="width: 100px;">⚪拖拽组合</th>
                        <th style="width: 100px;">🔴游戏巩固</th>
                        <th style="width: 100px;">🎊结束语</th>
                        <th style="width: 120px;">总进度</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="course in filteredCourses" :key="course.id" class="course-row">
                        <td style="font-weight: bold; color: #667eea;">{{ course.number }}</td>
                        
                        <!-- 课程信息卡片 -->
                        <td>
                            <div class="course-info">
                                <div class="course-number">{{ course.number }}</div>
                                <div class="course-char">{{ course.character }}</div>
                                <div class="course-pinyin">{{ course.pinyin }}</div>
                                <div class="course-strokes">{{ course.strokes }}画</div>
                            </div>
                        </td>

                        <!-- 模块状态格子 -->
                        <td v-for="(module, key) in course.modules" :key="key">
                            <div 
                                :class="['module-cell', 'status-' + module.status]"
                                @click="openEditor(course, key, module)"
                                :title="`${module.name} - ${getStatusText(module.status)}`">
                                <div class="module-icon">{{ module.icon }}</div>
                                <div class="module-name">{{ module.name }}</div>
                                <div class="module-info">
                                    <span v-if="module.status === 'completed'">{{ module.wordCount }}字</span>
                                    <span v-else-if="module.status === 'generating'">生成中</span>
                                    <span v-else-if="module.status === 'in_progress'">编辑中</span>
                                    <span v-else>待开始</span>
                                </div>
                            </div>
                        </td>

                        <!-- 总进度 -->
                        <td>
                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
                                <div style="width: 80px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;">
                                    <div 
                                        style="height: 100%; background: linear-gradient(90deg, #48bb78, #38a169); transition: width 0.5s;"
                                        :style="{width: course.progress + '%'}">
                                    </div>
                                </div>
                                <span style="font-size: 12px; font-weight: bold; color: #667eea;">{{ course.progress }}%</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="pagination">
                <button class="page-btn" @click="currentPage = Math.max(1, currentPage - 1)">上一页</button>
                <button 
                    v-for="page in totalPages" 
                    :key="page"
                    :class="['page-btn', { active: page === currentPage }]"
                    @click="currentPage = page">
                    {{ page }}
                </button>
                <button class="page-btn" @click="currentPage = Math.min(totalPages, currentPage + 1)">下一页</button>
            </div>
        </div>

        <!-- AI编辑器弹窗 -->
        <div v-if="showEditor" class="editor-overlay" @click.self="closeEditor">
            <div class="editor-modal">
                <div class="editor-header">
                    <div class="editor-title">
                        {{ currentCourse?.character }} {{ currentCourse?.pinyin }} - {{ currentModule?.name }}编辑器
                    </div>
                    <button class="close-btn" @click="closeEditor">×</button>
                </div>

                <div class="editor-content">
                    <div class="editor-main">
                        <div class="toolbar">
                            <!-- 基础操作 -->
                            <div class="toolbar-section">
                                <button class="toolbar-btn btn-success" @click="saveContent">💾 保存</button>
                                <button class="toolbar-btn btn-secondary" @click="undoEdit">↶ 撤销</button>
                                <button class="toolbar-btn btn-secondary" @click="redoEdit">↷ 重做</button>
                            </div>

                            <!-- 文本格式 -->
                            <div class="toolbar-section">
                                <button class="toolbar-btn format-btn btn-secondary" @click="formatText('bold')" title="加粗">
                                    <strong>B</strong>
                                </button>
                                <button class="toolbar-btn format-btn btn-secondary" @click="formatText('italic')" title="斜体">
                                    <em>I</em>
                                </button>
                                <button class="toolbar-btn format-btn btn-secondary" @click="formatText('underline')" title="下划线">
                                    <u>U</u>
                                </button>
                                <input type="color" class="color-picker" @change="changeTextColor" title="文字颜色" value="#000000">
                            </div>

                            <!-- 标题级别 -->
                            <div class="toolbar-section">
                                <button class="toolbar-btn btn-info" @click="insertHeading(1)">H1</button>
                                <button class="toolbar-btn btn-info" @click="insertHeading(2)">H2</button>
                                <button class="toolbar-btn btn-info" @click="insertHeading(3)">H3</button>
                            </div>

                            <!-- 列表和表格 -->
                            <div class="toolbar-section">
                                <button class="toolbar-btn btn-warning" @click="insertList('ordered')" title="有序列表">1. 列表</button>
                                <button class="toolbar-btn btn-warning" @click="insertList('unordered')" title="无序列表">• 列表</button>
                                <button class="toolbar-btn btn-warning" @click="insertTable" title="插入表格">📊 表格</button>
                            </div>

                            <!-- 其他工具 -->
                            <div class="toolbar-section">
                                <button class="toolbar-btn btn-secondary" @click="formatContent">📐 排版</button>
                                <button class="toolbar-btn btn-danger" @click="clearContent">🗑️ 清空</button>
                            </div>
                        </div>

                        <textarea 
                            ref="contentTextarea"
                            class="content-textarea"
                            v-model="editorContent"
                            placeholder="在这里编辑讲稿内容，或使用右侧AI生成工具..."
                            @select="handleTextSelect">
                        </textarea>

                        <!-- TTS语音控制 -->
                        <div class="tts-controls">
                            <h5>🔊 文字转语音朗读</h5>
                            <select class="voice-select" v-model="selectedVoice">
                                <option value="xiaoxiao">小晓 (儿童友好)</option>
                                <option value="xiaoyi">小艺 (标准女声)</option>
                                <option value="xiaoyun">小云 (温和女声)</option>
                                <option value="xiaomeng">小萌 (活泼童声)</option>
                            </select>
                            <div class="tts-controls-row">
                                <span style="font-size: 10px;">慢</span>
                                <input type="range" class="speed-slider" v-model="speechSpeed" min="0.5" max="2" step="0.1">
                                <span style="font-size: 10px;">快</span>
                            </div>
                            <div class="tts-controls-row">
                                <button class="tts-btn play-btn" @click="playTTS" :disabled="!editorContent">▶ 播放</button>
                                <button class="tts-btn pause-btn" @click="pauseTTS" :disabled="!isTTSPlaying">⏸ 暂停</button>
                                <button class="tts-btn stop-btn" @click="stopTTS" :disabled="!isTTSPlaying">⏹ 停止</button>
                            </div>
                            <div class="format-preview" v-if="selectedText">
                                已选中 {{ selectedText.length }} 字 | 点击播放朗读选中内容
                            </div>
                        </div>

                        <div :class="['status-bar', editorStatus]">
                            <div v-if="editorStatus === 'generating'">
                                🤖 AI正在生成内容，请稍候...
                            </div>
                            <div v-else-if="editorStatus === 'saved'">
                                ✅ 内容已保存 ({{ editorContent.length }}字)
                                <span v-if="lastSaveTime">- {{ lastSaveTime }}</span>
                            </div>
                            <div v-else>
                                📝 当前内容：{{ editorContent.length }}字
                                <span v-if="selectedText"> | 已选中：{{ selectedText.length }}字</span>
                            </div>
                        </div>
                    </div>

                    <div class="ai-panel">
                        <!-- AI生成配置 -->
                        <div class="ai-section">
                            <h4>🤖 AI内容生成</h4>
                            <select class="model-select" v-model="selectedModel">
                                <option value="deepseek">DeepSeek (推荐)</option>
                                <option value="qwen">Qwen-Plus</option>
                                <option value="qwen2.5">Qwen2.5-72B</option>
                                <option value="yi">Yi-Lightning</option>
                                <option value="glm4">GLM-4-Plus</option>
                                <option value="claude">Claude-3.5-Sonnet</option>
                                <option value="gpt4">GPT-4o</option>
                                <option value="moonshot">Moonshot-v1</option>
                            </select>
                            
                            <select class="module-select" v-model="targetModule">
                                <option value="welcome">👋 欢迎词</option>
                                <option value="radical">🟢 字根学习</option>
                                <option value="stroke">🔵 偏旁笔画</option>
                                <option value="writing">🟡 书写讲解</option>
                                <option value="combine">⚪ 拖拽组合</option>
                                <option value="game">🔴 游戏巩固</option>
                                <option value="summary">🎊 结束语</option>
                            </select>

                            <textarea 
                                class="prompt-textarea" 
                                v-model="customPrompt"
                                placeholder="添加额外提示词...如：语言要生动活泼，适合5-8岁儿童理解"></textarea>
                            
                            <button class="generate-btn" @click="generateWithAI">
                                🚀 生成内容 ({{ selectedModel.toUpperCase() }})
                            </button>
                        </div>

                        <!-- 快速生成 -->
                        <div class="ai-section">
                            <h4>⚡ 快速生成</h4>
                            <div class="ai-option" @click="quickGenerate('welcome')">👋 生成欢迎词</div>
                            <div class="ai-option" @click="quickGenerate('explanation')">📚 生成知识讲解</div>
                            <div class="ai-option" @click="quickGenerate('interaction')">🎮 生成互动环节</div>
                            <div class="ai-option" @click="quickGenerate('summary')">📝 生成课程总结</div>
                            <div class="ai-option" @click="quickGenerate('story')">📖 生成趣味故事</div>
                            <div class="ai-option" @click="quickGenerate('song')">🎵 生成儿歌韵律</div>
                        </div>

                        <!-- 文本润色 -->
                        <div class="ai-section">
                            <h4>✨ 智能润色</h4>
                            <div class="ai-option" @click="polishText('child_friendly')">👶 儿童化表达</div>
                            <div class="ai-option" @click="polishText('vivid')">🌈 生动化描述</div>
                            <div class="ai-option" @click="polishText('interactive')">🤝 增加互动性</div>
                            <div class="ai-option" @click="polishText('simple')">💡 简化语言</div>
                            <div class="ai-option" @click="polishText('expand')">📖 扩展内容</div>
                            <div class="ai-option" @click="polishText('rhythm')">🎵 增加韵律感</div>
                        </div>

                        <!-- 内容模板 -->
                        <div class="ai-section">
                            <h4>📐 内容模板</h4>
                            <div class="ai-option" @click="addTemplate('intro')">🎬 课程开场模板</div>
                            <div class="ai-option" @click="addTemplate('attention')">👀 注意力引导</div>
                            <div class="ai-option" @click="addTemplate('practice')">✍️ 练习环节模板</div>
                            <div class="ai-option" @click="addTemplate('reward')">🎁 奖励鼓励语</div>
                            <div class="ai-option" @click="addTemplate('ending')">👋 课程结束语</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    // 搜索和筛选
                    searchKeyword: '',
                    showFilter: false,
                    currentPage: 1,
                    pageSize: 10,

                    // 编辑器状态
                    showEditor: false,
                    currentCourse: null,
                    currentModule: null,
                    currentModuleKey: null,
                    editorContent: '',
                    editorStatus: 'ready',
                    selectedText: '',
                    lastSaveTime: '',

                    // AI配置
                    selectedModel: 'deepseek',
                    targetModule: 'welcome',
                    customPrompt: '',

                    // TTS配置
                    selectedVoice: 'xiaoxiao',
                    speechSpeed: 1.0,
                    isTTSPlaying: false,
                    speechSynthesis: null,
                    currentUtterance: null,

                    // 课程数据
                    courses: [
                        {
                            id: 'course_001',
                            number: '001',
                            character: '一',
                            pinyin: 'yī',
                            strokes: 1,
                            progress: 85,
                            modules: {
                                welcome: { name: '欢迎词', status: 'completed', icon: '👋', wordCount: 68 },
                                radical: { name: '字根学习', status: 'completed', icon: '🟢', wordCount: 156 },
                                stroke: { name: '偏旁笔画', status: 'completed', icon: '🔵', wordCount: 89 },
                                writing: { name: '书写讲解', status: 'in_progress', icon: '🟡', wordCount: 45 },
                                combine: { name: '拖拽组合', status: 'pending', icon: '⚪', wordCount: 0 },
                                game: { name: '游戏巩固', status: 'pending', icon: '🔴', wordCount: 0 },
                                summary: { name: '结束语', status: 'pending', icon: '🎊', wordCount: 0 }
                            }
                        },
                        {
                            id: 'course_002',
                            number: '002',
                            character: '工',
                            pinyin: 'gōng',
                            strokes: 3,
                            progress: 42,
                            modules: {
                                welcome: { name: '欢迎词', status: 'completed', icon: '👋', wordCount: 72 },
                                radical: { name: '字根学习', status: 'completed', icon: '🟢', wordCount: 134 },
                                stroke: { name: '偏旁笔画', status: 'generating', icon: '🔵', wordCount: 0 },
                                writing: { name: '书写讲解', status: 'pending', icon: '🟡', wordCount: 0 },
                                combine: { name: '拖拽组合', status: 'pending', icon: '⚪', wordCount: 0 },
                                game: { name: '游戏巩固', status: 'pending', icon: '🔴', wordCount: 0 },
                                summary: { name: '结束语', status: 'pending', icon: '🎊', wordCount: 0 }
                            }
                        },
                        {
                            id: 'course_003',
                            number: '003',
                            character: '水',
                            pinyin: 'shuǐ',
                            strokes: 4,
                            progress: 28,
                            modules: {
                                welcome: { name: '欢迎词', status: 'completed', icon: '👋', wordCount: 65 },
                                radical: { name: '字根学习', status: 'in_progress', icon: '🟢', wordCount: 78 },
                                stroke: { name: '偏旁笔画', status: 'pending', icon: '🔵', wordCount: 0 },
                                writing: { name: '书写讲解', status: 'pending', icon: '🟡', wordCount: 0 },
                                combine: { name: '拖拽组合', status: 'pending', icon: '⚪', wordCount: 0 },
                                game: { name: '游戏巩固', status: 'pending', icon: '🔴', wordCount: 0 },
                                summary: { name: '结束语', status: 'pending', icon: '🎊', wordCount: 0 }
                            }
                        },
                        {
                            id: 'course_004',
                            number: '004',
                            character: '火',
                            pinyin: 'huǒ',
                            strokes: 4,
                            progress: 100,
                            modules: {
                                welcome: { name: '欢迎词', status: 'completed', icon: '👋', wordCount: 75 },
                                radical: { name: '字根学习', status: 'completed', icon: '🟢', wordCount: 142 },
                                stroke: { name: '偏旁笔画', status: 'completed', icon: '🔵', wordCount: 98 },
                                writing: { name: '书写讲解', status: 'completed', icon: '🟡', wordCount: 124 },
                                combine: { name: '拖拽组合', status: 'completed', icon: '⚪', wordCount: 89 },
                                game: { name: '游戏巩固', status: 'completed', icon: '🔴', wordCount: 76 },
                                summary: { name: '结束语', status: 'completed', icon: '🎊', wordCount: 58 }
                            }
                        },
                        {
                            id: 'course_005',
                            number: '005',
                            character: '木',
                            pinyin: 'mù',
                            strokes: 4,
                            progress: 14,
                            modules: {
                                welcome: { name: '欢迎词', status: 'completed', icon: '👋', wordCount: 69 },
                                radical: { name: '字根学习', status: 'pending', icon: '🟢', wordCount: 0 },
                                stroke: { name: '偏旁笔画', status: 'pending', icon: '🔵', wordCount: 0 },
                                writing: { name: '书写讲解', status: 'pending', icon: '🟡', wordCount: 0 },
                                combine: { name: '拖拽组合', status: 'pending', icon: '⚪', wordCount: 0 },
                                game: { name: '游戏巩固', status: 'pending', icon: '🔴', wordCount: 0 },
                                summary: { name: '结束语', status: 'pending', icon: '🎊', wordCount: 0 }
                            }
                        }
                    ]
                }
            },

            computed: {
                // 统计数据
                statistics() {
                    const total = this.courses.length;
                    const completed = this.courses.filter(c => c.progress === 100).length;
                    const inProgress = this.courses.filter(c => c.progress > 0 && c.progress < 100).length;
                    const pending = this.courses.filter(c => c.progress === 0).length;
                    const avgProgress = Math.round(this.courses.reduce((sum, c) => sum + c.progress, 0) / total);

                    return { total, completed, inProgress, pending, avgProgress };
                },

                // 筛选后的课程
                filteredCourses() {
                    let filtered = this.courses;
                    
                    if (this.searchKeyword) {
                        const keyword = this.searchKeyword.toLowerCase();
                        filtered = filtered.filter(course => 
                            course.character.includes(keyword) ||
                            course.pinyin.toLowerCase().includes(keyword) ||
                            course.number.includes(keyword)
                        );
                    }

                    // 分页
                    const start = (this.currentPage - 1) * this.pageSize;
                    return filtered.slice(start, start + this.pageSize);
                },

                // 总页数
                totalPages() {
                    return Math.ceil(this.courses.length / this.pageSize);
                }
            },

            methods: {
                // 打开编辑器
                openEditor(course, moduleKey, module) {
                    this.currentCourse = course;
                    this.currentModule = module;
                    this.currentModuleKey = moduleKey;
                    this.targetModule = moduleKey; // 设置默认目标模块
                    this.editorContent = this.getModuleContent(course.character, moduleKey);
                    this.showEditor = true;
                    this.editorStatus = 'ready';
                },

                // 关闭编辑器
                closeEditor() {
                    this.showEditor = false;
                    this.currentCourse = null;
                    this.currentModule = null;
                    this.editorContent = '';
                    this.selectedText = '';
                },

                // 获取模块内容
                getModuleContent(character, moduleKey) {
                    const templates = {
                        welcome: `大家好！欢迎来到岚小字识字课堂！今天我们要学习一个非常重要的汉字——"${character}"。这个字是汉字的基础字根之一，学会了它，就能认识很多相关的汉字。让我们一起开始这趟有趣的汉字之旅吧！`,
                        
                        radical: `现在让我们仔细观察"${character}"这个字根。它的形状简单而独特，像是${this.getCharacterDescription(character)}。在古代，人们就是根据这样的形象来创造汉字的。"${character}"作为字根，可以组成很多其他的汉字，比如...`,
                        
                        stroke: `接下来我们学习"${character}"的笔画顺序。这个字共有${this.getStrokeCount(character)}画。正确的笔画顺序对于写好汉字非常重要，让我们一笔一划地来练习...`,
                        
                        writing: `现在我来为大家示范如何正确书写"${character}"这个字。请大家仔细观察我的书写动作，注意每一笔的起笔、行笔和收笔。书写时要保持正确的坐姿和握笔姿势...`,
                        
                        combine: `让我们用拖拽的方式来体验"${character}"字根的组合魅力！在屏幕上，你们可以看到"${character}"这个字根，现在我们来尝试将它与其他偏旁部首组合，创造出新的汉字...`,
                        
                        game: `现在到了最有趣的游戏时间！我们要通过游戏来巩固对"${character}"这个字的学习。游戏规则很简单，请大家根据我的提示来找出包含"${character}"字根的汉字...`,
                        
                        summary: `今天的"${character}"字学习就到这里了！让我们回顾一下今天学到的内容：我们认识了"${character}"这个字根，学会了它的笔画顺序，还通过游戏巩固了学习效果。希望大家课后多多练习，下节课见！`
                    };
                    
                    return templates[moduleKey] || '';
                },

                // 获取字符描述
                getCharacterDescription(char) {
                    const descriptions = {
                        '一': '一条水平的线',
                        '工': '工人使用的工具',
                        '水': '流动的水波',
                        '火': '燃烧的火焰',
                        '木': '生长的树木'
                    };
                    return descriptions[char] || '特殊的形状';
                },

                // 获取笔画数
                getStrokeCount(char) {
                    const strokes = { '一': 1, '工': 3, '水': 4, '火': 4, '木': 4 };
                    return strokes[char] || 1;
                },

                // 获取状态文本
                getStatusText(status) {
                    const statusMap = {
                        completed: '已完成',
                        in_progress: '进行中',
                        generating: 'AI生成中',
                        pending: '待开始'
                    };
                    return statusMap[status] || '未知状态';
                },

                // 保存内容
                saveContent() {
                    this.editorStatus = 'generating';
                    setTimeout(() => {
                        this.currentModule.wordCount = this.editorContent.length;
                        this.currentModule.status = 'completed';
                        this.editorStatus = 'saved';
                        this.lastSaveTime = new Date().toLocaleTimeString();
                        this.updateProgress();
                    }, 1000);
                },

                // AI生成内容
                generateContent() {
                    this.editorStatus = 'generating';
                    this.currentModule.status = 'generating';
                    
                    setTimeout(() => {
                        this.editorContent = this.getModuleContent(this.currentCourse.character, this.currentModuleKey);
                        this.editorStatus = 'ready';
                        this.currentModule.status = 'completed';
                        this.currentModule.wordCount = this.editorContent.length;
                        this.updateProgress();
                    }, 2500);
                },

                // 使用AI生成内容
                generateWithAI() {
                    this.editorStatus = 'generating';
                    this.currentModule.status = 'generating';
                    
                    // 构建提示词
                    const basePrompt = this.getBasePrompt(this.currentCourse.character, this.targetModule);
                    const fullPrompt = this.customPrompt ? `${basePrompt}\n\n额外要求：${this.customPrompt}` : basePrompt;
                    
                    setTimeout(() => {
                        // 模拟AI生成结果
                        const generatedContent = this.generateAIContent(this.currentCourse.character, this.targetModule, fullPrompt);
                        this.editorContent = generatedContent;
                        this.editorStatus = 'ready';
                        this.currentModule.status = 'completed';
                        this.currentModule.wordCount = this.editorContent.length;
                        this.updateProgress();
                    }, 3000);
                },

                // 获取基础提示词
                getBasePrompt(character, moduleKey) {
                    const prompts = {
                        welcome: `为字根识字课程"${character}"生成欢迎词。要求：语言亲切友好，适合5-8岁儿童，能激发学习兴趣，介绍今天要学的字。`,
                        radical: `为字根"${character}"生成详细的字根学习内容。要求：解释字的形状特征、象形含义、在其他汉字中的作用，语言生动易懂。`,
                        stroke: `为"${character}"生成偏旁笔画学习内容。要求：详细说明笔画顺序、书写要点、常见偏旁组合，适合儿童理解。`,
                        writing: `为"${character}"生成书写讲解内容。要求：逐步示范书写过程、强调关键笔画、提醒书写姿势，语言鼓励性。`,
                        combine: `为"${character}"生成拖拽组合环节内容。要求：介绍如何与其他部首组合成新字，互动性强，趣味性高。`,
                        game: `为"${character}"设计游戏巩固环节。要求：设计有趣的识字游戏，加深记忆，包含竞猜、找字等互动形式。`,
                        summary: `为"${character}"课程生成结束语。要求：总结学习内容，表扬学生，布置练习作业，语言温暖鼓励。`
                    };
                    return prompts[moduleKey] || `为"${character}"生成的${moduleKey}内容。`;
                },

                // 生成AI内容（模拟）
                generateAIContent(character, moduleKey, prompt) {
                    const templates = {
                        welcome: `🎉 小朋友们好！欢迎来到岚小字识字课堂！
                        
今天我们要认识一个非常特别的汉字——"${character}"！

这个字就像是汉字王国里的一个小魔法师，它虽然看起来简单，但是能变出很多很多其他的字呢！

小朋友们，你们想知道"${character}"是怎么变魔法的吗？那就跟着老师一起走进今天的识字冒险吧！

准备好了吗？让我们开始吧！✨`,

                        radical: `🔍 现在我们来仔细观察"${character}"这个神奇的字根！

看！"${character}"的样子是不是很有趣？在很久很久以前，古代的爷爷奶奶们看到了${this.getCharacterDescription(character)}，就画出了这个字的样子。

"${character}"是一个非常重要的字根，就像积木一样，可以和其他的字根组合在一起，变成新的汉字！

比如说：
• "${character}" + 其他部分 = 新的汉字
• 每个组合都有新的意思

小朋友们，你们能想到哪些字里面有"${character}"吗？🤔`,

                        game: `🎮 游戏时间到！让我们一起来玩"${character}"字大冒险！

游戏规则：
1️⃣ 老师说出一个字，如果字里面有"${character}"，小朋友就举起小手！
2️⃣ 看谁反应最快，最快的小朋友可以得到小星星⭐

准备好了吗？游戏开始！

还有一个超级有趣的游戏："${character}"字连连看！
在黑板上找出所有包含"${character}"的字，找到一个就可以得到一朵小红花🌺

小朋友们真厉害！都找到了这么多字！`
                    };
                    
                    return templates[moduleKey] || `为"${character}"生成的${moduleKey}内容...`;
                },

                // 处理文本选择
                handleTextSelect(event) {
                    const start = event.target.selectionStart;
                    const end = event.target.selectionEnd;
                    this.selectedText = this.editorContent.substring(start, end);
                },

                // 润色文本
                polishText(style) {
                    if (!this.selectedText) {
                        alert('请先选中要润色的文本');
                        return;
                    }
                    
                    this.editorStatus = 'generating';
                    
                    setTimeout(() => {
                        // 模拟润色效果
                        const polishStyles = {
                            child_friendly: '用更适合儿童的语言表达',
                            vivid: '用更生动的描述',
                            interactive: '增加互动性提问',
                            simple: '简化语言表达',
                            expand: '扩展更多内容',
                            rhythm: '增加韵律感'
                        };
                        
                        this.editorStatus = 'ready';
                        alert(`已对选中文本进行"${polishStyles[style]}"润色处理`);
                    }, 2000);
                },

                // 格式化内容
                formatContent() {
                    // 清理多余空行和空格
                    this.editorContent = this.editorContent
                        .replace(/\n\n+/g, '\n\n')
                        .replace(/[ \t]+/g, ' ')
                        .replace(/^\s+|\s+$/gm, '')
                        .trim();
                    
                    // 标准化标题格式
                    this.editorContent = this.editorContent
                        .replace(/^(#{1,3})\s*(.+)$/gm, '$1 $2')
                        .replace(/^(.+)\n={3,}$/gm, '# $1')
                        .replace(/^(.+)\n-{3,}$/gm, '## $1');
                    
                    alert('内容已格式化排版');
                },

                // 清空内容
                clearContent() {
                    if (confirm('确定要清空所有内容吗？')) {
                        this.editorContent = '';
                        this.currentModule.status = 'pending';
                        this.currentModule.wordCount = 0;
                        this.updateProgress();
                    }
                },

                // 撤销编辑
                undoEdit() {
                    alert('撤销功能开发中...');
                },

                // 重做编辑
                redoEdit() {
                    alert('重做功能开发中...');
                },

                // 快速生成
                quickGenerate(type) {
                    const templates = {
                        welcome: '\n\n🎉【欢迎环节】\n小朋友们，大家好！欢迎来到今天的识字课堂！',
                        explanation: '\n\n📚【知识讲解】\n现在让我们一起来学习这个有趣的汉字...',
                        interaction: '\n\n🎮【互动环节】\n小朋友们，请跟老师一起做动作...',
                        summary: '\n\n📝【课程总结】\n今天我们学习了很多知识，大家都表现得很棒！',
                        story: '\n\n📖【趣味故事】\n从前有一个汉字王国，里面住着很多字宝宝...',
                        song: '\n\n🎵【儿歌韵律】\n小小汉字真奇妙，一笔一画要记牢...'
                    };
                    this.editorContent += templates[type] || '';
                },

                // 添加模板
                addTemplate(type) {
                    const templates = {
                        intro: '\n\n🎬 === 课程开场 ===\n各位小朋友，今天我们要学习的是一个非常神奇的汉字...\n\n',
                        attention: '\n\n👀 === 注意力引导 ===\n小朋友们，请看黑板，眼睛要专注哦！\n\n',
                        practice: '\n\n✍️ === 练习时间 ===\n现在请大家拿出小手指，我们一起来练习书写...\n\n',
                        reward: '\n\n🎁 === 奖励鼓励 ===\n哇！小朋友们真棒！老师要给大家一个大大的赞！👍\n\n',
                        ending: '\n\n👋 === 课程结束 ===\n今天的课程就到这里啦！大家都学得很认真，给自己鼓鼓掌吧！\n\n'
                    };
                    this.editorContent += templates[type] || '';
                },

                // 筛选课程
                filterCourses() {
                    this.currentPage = 1; // 重置到第一页
                },

                // 更新进度
                updateProgress() {
                    const modules = Object.values(this.currentCourse.modules);
                    const completed = modules.filter(m => m.status === 'completed').length;
                    this.currentCourse.progress = Math.round((completed / modules.length) * 100);
                },

                // 播放TTS
                playTTS() {
                    if (!this.editorContent) {
                        alert('请先编辑内容');
                        return;
                    }
                    this.isTTSPlaying = true;
                    this.currentUtterance = new SpeechSynthesisUtterance(this.editorContent);
                    this.currentUtterance.voice = this.getVoice();
                    this.currentUtterance.onstart = () => {
                        this.editorStatus = 'generating';
                    };
                    this.currentUtterance.onend = () => {
                        this.editorStatus = 'ready';
                        this.isTTSPlaying = false;
                    };
                    speechSynthesis.speak(this.currentUtterance);
                },

                // 暂停TTS
                pauseTTS() {
                    speechSynthesis.pause();
                    this.isTTSPlaying = false;
                },

                // 停止TTS
                stopTTS() {
                    speechSynthesis.cancel();
                    this.isTTSPlaying = false;
                },

                // 获取语音
                getVoice() {
                    const voices = speechSynthesis.getVoices();
                    const selectedVoice = voices.find(v => v.name === this.selectedVoice);
                    if (selectedVoice) {
                        return selectedVoice;
                    }
                    return voices[0];
                },

                // 改变文本颜色
                changeTextColor(event) {
                    const color = event.target.value;
                    const textarea = this.$refs.contentTextarea;
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const selectedText = this.editorContent.substring(start, end);
                    
                    if (!selectedText) {
                        alert('请先选中要改变颜色的文本');
                        return;
                    }
                    
                    const coloredText = `<span style="color: ${color};">${selectedText}</span>`;
                    this.editorContent = this.editorContent.substring(0, start) + coloredText + this.editorContent.substring(end);
                },

                // 插入标题
                insertHeading(level) {
                    const textarea = this.$refs.contentTextarea;
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const selectedText = this.editorContent.substring(start, end) || '标题文本';
                    
                    const heading = '#'.repeat(level) + ' ' + selectedText;
                    this.editorContent = this.editorContent.substring(0, start) + heading + this.editorContent.substring(end);
                },

                // 插入列表
                insertList(type) {
                    const textarea = this.$refs.contentTextarea;
                    const start = textarea.selectionStart;
                    const selectedText = this.editorContent.substring(start, start + 50) || '列表项目';
                    
                    let listItem = '';
                    if (type === 'ordered') {
                        listItem = '1. ' + selectedText + '\n2. 列表项目2\n3. 列表项目3';
                    } else {
                        listItem = '• ' + selectedText + '\n• 列表项目2\n• 列表项目3';
                    }
                    
                    this.editorContent = this.editorContent.substring(0, start) + '\n' + listItem + '\n' + this.editorContent.substring(start);
                },

                // 插入表格
                insertTable() {
                    const table = `
| 表头1 | 表头2 | 表头3 |
|-------|-------|-------|
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |
`;
                    const textarea = this.$refs.contentTextarea;
                    const start = textarea.selectionStart;
                    this.editorContent = this.editorContent.substring(0, start) + table + this.editorContent.substring(start);
                },

                // 格式化文本
                formatText(format) {
                    const textarea = this.$refs.contentTextarea;
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const selectedText = this.editorContent.substring(start, end);
                    
                    if (!selectedText) {
                        alert('请先选中要格式化的文本');
                        return;
                    }
                    
                    let formattedText = '';
                    switch(format) {
                        case 'bold':
                            formattedText = `**${selectedText}**`;
                            break;
                        case 'italic':
                            formattedText = `*${selectedText}*`;
                            break;
                        case 'underline':
                            formattedText = `<u>${selectedText}</u>`;
                            break;
                    }
                    
                    this.editorContent = this.editorContent.substring(0, start) + formattedText + this.editorContent.substring(end);
                    
                    // 重新设置光标位置
                    this.$nextTick(() => {
                        textarea.selectionStart = start;
                        textarea.selectionEnd = start + formattedText.length;
                        textarea.focus();
                    });
                }
            },

            mounted() {
                // 模拟生成中状态的动态更新
                setInterval(() => {
                    this.courses.forEach(course => {
                        Object.values(course.modules).forEach(module => {
                            if (module.status === 'generating') {
                                // 模拟生成完成
                                if (Math.random() > 0.95) {
                                    module.status = 'completed';
                                    module.wordCount = Math.floor(Math.random() * 200) + 50;
                                }
                            }
                        });
                    });
                }, 3000);
            }
        }).mount('#app');
    </script>
</body>
</html> 